<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item {
            width: 200px;
            height: 200px;
            border: 1px solid darkgrey;
        }
    </style>
</head>
<body>
<div id="diagramContainer">
    <div id="item_left" class="item"></div>
    <div id="item_right" class="item" style="left:150px;"></div>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
<script>
    /**
     * Souce 源节点
     * Target 目标节点
     * Anchor 锚点
     * Endpoint 端点
     * Connector 连接
     */
    jsPlumb.ready(function () {
        jsPlumb.setContainer('diagramContainer')
        var common = {
            isSource: true,
            isTarget: true,
            connector: 'Straight',
            endpoint: 'Dot',
            paintStyle: {
                fill: 'white',
                outlineStroke: 'blue',
                strokeWidth: 3
            },
            hoverPaintStyle: {
                outlineStroke: 'lightblue'
            },
            connectorStyle: {
                outlineStroke: 'green',
                strokeWidth: 1
            },
            connectorHoverStyle: {
                strokeWidth: 2
            },
            maxConnections: -1
        }
        jsPlumb.addEndpoint('item_left', {
            anchors: ['Right']
        }, common)
        jsPlumb.addEndpoint('item_right', {
            anchor: 'Left'
        }, common)
        jsPlumb.addEndpoint('item_right', {
            anchor: 'Right'
        }, common)
    })
</script>
